<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="preconnect" href="https://fonts.gstatic.com">
	<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
	<title>Getting Started with DHTMLX Gantt</title>
	<style>
		:root {
			--dark-color: #5F5F5F;
			--blue-color: #2095F3;
			--light-gray: #F7F7F7;
			--light-color: #828282;
		}
		h1,h2,h3,h4,h5,h6,p,ul,button {
			padding: 0;
			margin: 0;
		}
		body {
			margin: 0;
			padding: 0;
			font-family: 'Roboto', sans-serif;
		}
		code {
			display: block;
		}
		.container {
			max-width: 1280px;
			margin: 0 auto;
			box-sizing: border-box;
			padding: 20px 25px;
			display: flex;
		}
		.col {
			box-sizing: border-box;
			max-width: 545px;
		}
		.col:last-of-type {
			max-width: 100%;
		}
		.title {
			color: var(--dark-color);
			font-size: 16px;
			line-height: 19px;
			font-weight: 500;
		}		
		.title--link {
			color: var(--blue-color);
			text-decoration: underline;
		}
		.page-title {
			font-size: 18px;
			line-height: 21px;
		}
		.blue-line {
			position: relative;
		}
		.blue-line:after {
			position: absolute;
			content: '';
			background-color: var(--blue-color);
			height: 4px;
			width: 105px;
			left: 0;
			bottom: -13px;
		}
		.logo {
			display: inline-block;
		}
		.link {
			font-size: 16px;
			line-height: 24px;
			color: var(--blue-color);
			text-decoration: underline;
			font-weight: 300;
		}
		.text-block {
			font-weight: 300;
			font-size: 16px;
			line-height: 24px;
			color: var(--dark-color);
		}
		.code {
			background-color: var(--light-gray);
			color: var(--dark-color);
			font-size: 16px;
			line-height: 24px;
			padding: 5px;
			border: 1px solid #e0e0e0;
			box-sizing: border-box;
		}
		.code a {
			color: var(--dark-color);
		}
		.picture-block {
			text-align: center;
			height: 253px;
			background:url('') center center no-repeat;
			background-size: contain;
		}
		.technology {
			display: flex;
			justify-content: space-between;
		}
		.technology-col {
			display: flex;
			flex-direction: column;
		}
		.technology-link {
			display: block;
			position: relative;
			font-size: 16px;
			line-height: 24px;
			text-decoration: underline;
			color: var(--blue-color);
			padding-left: 10px;
			font-weight: 300;
		}
		.technology-link:before {
			position: absolute;
			content: '';
			background-color: var(--blue-color);
			width: 5px;
			height: 5px;
			border-radius: 50%;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
		}
		.copyright {
			text-align: right;
			font-size: 14px;
			font-weight: 300;
			line-height: 24px;
			color: var(--light-color);
		}
		.copyright span:first-of-type {
			margin-right: 10px;
		}
		.m-b-25 {
			margin-bottom: 25px;
		}
		.m-b-15 {
			margin-bottom: 15px;
		}
		.m-b-10 {
			margin-bottom: 10px;
		}
		.m-b-5 {
			margin-bottom: 5px;
		}
		.m-t-10 {
			margin-top: 10px;
		}
		.m-t-5 {
			margin-top: 5px;
		}
		.m-r-50 {
			margin-right: 50px;
		}
		@media screen and (max-width: 1000px) {
			.container {
				flex-direction: column;
			}
			.col {
				width: 100%;
				max-width: unset;
			}
			.picture-block img {
				width: 100%;
			}
			.technology {
				flex-direction: column;
			}
			.technology-col {
				text-align: auto;
			}
		}
		@media screen and (min-width: 600px) {
			.technology {
				flex-direction: row;
			}
		}
	</style>
</head>
<body>
	<main class="page">
		<div class="container">
			<div class="col m-r-50">
				<a href="https://dhtmlx.com/?utm_source=trial_html&utm_medium=referral&utm_campaign=gantt" target="_blank" class="logo m-b-10">
					<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
						<path fill-rule="evenodd" clip-rule="evenodd" d="M42.06 30.6L38.1 23.16L34.14 30.6H28.2L34.8 19.74L28.2 9.60001H34.14L38.1 15.72L42.06 9.60001H48L40.74 19.74L48 30.6H42.06ZM0 33.6V32.4H48V33.6H0ZM27.6 30.6L32.4 23.16V16.8L27.6 9.60001V17.04H21V9.60001H15.6V11.88C16.56 12.66 17.4 13.62 18 14.82C18.78 16.32 19.2 18.06 19.2 20.1C19.2 22.08 18.78 23.82 17.94 25.38C17.28 26.52 16.5 27.48 15.6 28.26V30.6H21V21.78H27.6V30.6ZM18.6 20.1C18.6 22.08 18.18 23.82 17.34 25.38C16.5 26.94 15.42 28.14 14.1 28.92C13.02 29.64 11.82 30.06 10.56 30.3C9.3 30.48 7.92 30.6 6.48 30.6H0V9.60001H6.48C7.92 9.60001 9.3 9.72001 10.62 9.90001C11.88 10.08 13.08 10.56 14.22 11.28C15.6 12.18 16.68 13.38 17.46 14.88C18.18 16.32 18.6 18.12 18.6 20.1ZM10.56 14.28C11.52 14.82 12.24 15.6 12.72 16.56C13.2 17.52 13.44 18.72 13.5 20.04C13.5 21.48 13.26 22.62 12.84 23.58C12.36 24.54 11.7 25.32 10.86 25.86C10.14 26.34 9.35996 26.58 8.57996 26.64C7.73996 26.7 6.77996 26.7 5.57996 26.7H5.45996V13.56H5.57996C6.65996 13.56 7.55996 13.56 8.33996 13.62C9.11996 13.68 9.83996 13.86 10.56 14.28ZM2.4 35.4V36H1.2V37.8H2.4V38.4H0.6V35.4H2.4ZM2.4 37.8V36H3V37.8H2.4ZM11.4 36.6H10.2V35.4H9.6V38.4H10.2V37.2H11.4V38.4H12V35.4H11.4V36.6ZM21 35.4V36H19.8V38.4H19.2V36H18V35.4H21ZM28.2 36H27.6V35.4H27V38.4H27.6V36.6H28.2V37.2H28.8V36.6H29.4V38.4H30V35.4H29.4V36H28.8V36.6H28.2V36ZM36 35.4H36.6V37.8H38.4V38.4H36V35.4ZM45.6 36H45V35.4H44.4V36H45V36.6H45.6V37.2H45V37.8H44.4V38.4H45V37.8H45.6V37.2L46.2 37.2V37.8H46.8V38.4H47.4V37.8H46.8V37.2H46.2L46.2 36.6H46.8V36H47.4V35.4H46.8V36H46.2V36.6H45.6V36Z" fill="#2095F3"/>
					</svg>
				</a>
				<h1 class="page-title title blue-line m-b-25">Getting Started with DHTMLX Gantt</h1>
				<p class="text-block m-b-15">
					Any web-based project management application can be complemented with a full-fledged Gantt chart built with DHTMLX Gantt. We’ve put together links to useful materials devoted to initializing, configuring, customizing, and using DHTMLX Gantt with popular technologies. Thus, you will be able to make the most of DHTMLX in the shortest possible time.
				</p>
				<h2 class="title m-b-10">Samples</h2>
				<p class="text-block m-b-10">
					This package contains more than 100 code samples, which demonstrate different configurations of DHTMLX Gantt. In order to explore them, you can run a built-in app (you'll need Node.js for this):
					<code class="code m-b-10 m-t-10">
						npm install <br>	
						npm run start
					</code>
					And open <span class="code"><a href="http://localhost:9200" target="_blank">http://localhost:9200</a></span> in your browser.
				</p>
				<p class="text-block m-b-10">
					Or you can find individual HTML <span class="code">samples</span> in the samples folder of the package.
				</p>
				<a class="title title--link m-b-10" target="_blank" href="https://docs.dhtmlx.com/gantt/api__refs__gantt.html?utm_source=trial_html&utm_medium=referral&utm_campaign=gantt">
					API Reference
				</a>
				<p class="text-block m-b-10">
					Examine methods, events, properties, and templates
				</p>
				<a class="title title--link m-b-10" target="_blank" href="https://docs.dhtmlx.com/gantt/desktop__guides.html?utm_source=trial_html&utm_medium=referral&utm_campaign=gantt">
					Guides
				</a>
				<p class="text-block m-b-10">
					Learn how to configure each and every Gantt element
				</p>
				<a class="title title--link m-b-10" target="_blank" href="https://docs.dhtmlx.com/gantt/desktop__video_guides.html?utm_source=trial_html&utm_medium=referral&utm_campaign=gantt">
					Video Guides
				</a>
				<p class="text-block m-b-10">
					Watch a series of video guides about Gantt configuration and integration
				</p>
			</div>
			<div class="col">
				<div class="picture-block m-b-15"></div>

					<div class="technology m-b-10">
						<div class="technology-col">
							<h2 class="title m-b-5 ">Client-Side Integrations</h2>
							<a href="https://docs.dhtmlx.com/gantt/desktop__initializing_gantt_chart.html?utm_source=trial_html&utm_medium=referral&utm_campaign=gantt" target="_blank" class="technology-link">JavaScript/HTML5</a>
							<a href="https://dhtmlx.com/blog/create-react-gantt-chart-component-dhtmlxgantt/?utm_source=trial_html&utm_medium=referral&utm_campaign=gantt" target="_blank" class="technology-link">React</a>
							<a href="https://dhtmlx.com/blog/dhtmlx-gantt-chart-usage-angularjs-2-framework/?utm_source=trial_html&utm_medium=referral&utm_campaign=gantt" target="_blank" class="technology-link">Angular</a>
							<a href="https://dhtmlx.com/blog/use-dhtmlxgantt-vue-js-framework-demo/" class="technology-link" target="_blank">Vue.js</a>
						</div>
						<div class="technology-col">
							<h2 class="title m-b-5">Server-Side Integrations</h2>
							<a href="https://docs.dhtmlx.com/gantt/desktop__howtostart_dotnet_core.html?utm_source=trial_html&utm_medium=referral&utm_campaign=gantt" class="technology-link" target="_blank">ASP.Net Core</a>
							<a href="https://docs.dhtmlx.com/gantt/desktop__howtostart_dotnet.html?utm_source=trial_html&utm_medium=referral&utm_campaign=gantt" class="technology-link" target="_blank">ASP.Net MVC</a>
							<a href="https://docs.dhtmlx.com/gantt/desktop__howtostart_nodejs.html?utm_source=trial_html&utm_medium=referral&utm_campaign=gantt" class="technology-link" target="_blank">Node.js</a>
							<a href="https://docs.dhtmlx.com/gantt/desktop__howtostart_php_laravel.html?utm_source=trial_html&utm_medium=referral&utm_campaign=gantt" class="technology-link" target="_blank">PHP Laravel</a>
							<a href="https://docs.dhtmlx.com/gantt/desktop__howtostart_php.html?utm_source=trial_html&utm_medium=referral&utm_campaign=gantt" class="technology-link" target="_blank">PHP Slim 3</a>
							<a href="https://docs.dhtmlx.com/gantt/desktop__howtostart_php_slim4.html?utm_source=trial_html&utm_medium=referral&utm_campaign=gantt" class="technology-link" target="_blank">PHP Slim 4</a>
							<a href="https://docs.dhtmlx.com/gantt/desktop__howtostart_ruby.html?utm_source=trial_html&utm_medium=referral&utm_campaign=gantt" class="technology-link" target="_blank">Ruby on Rails</a>
						</div>
						<div class="technology-col">
							<h2 class="title m-b-5">Integration with Salesforce</h2>
							<p class="text-block"><span class="subtitle">Lightning Aura Framework:</span>
								<a href="https://files.dhtmlx.com/30d/1ceb430172c26291dc773c038da796bc/dhtmlxGantt-for-Salesforce2.pdf" class="technology-link m-t-5" target="_blank">Short Guide</a>
								<a href="https://files.dhtmlx.com/30d/006613a641ae5a8293ee4082b5aa0056/dhtmlxGantt_for_Salesforce_how_to_start_CRUD.pdf" class="technology-link m-b-5" target="_blank">How to Start CRUD</a>
							</p>
							<p class="text-block">
								<span class="subtitle">Lightning Web Components:</span>
								<a href="https://www.youtube.com/watch?v=cCvULTQxPfg" class="technology-link m-t-5" target="_blank">Video Guide</a>
								<a href="https://github.com/DHTMLX/salesforce-gantt-demo" class="technology-link" target="_blank">GitHub</a>
							</p>
						</div>
					</div>
					<a class="title title--link m-b-10" target="_blank" href="https://docs.dhtmlx.com/gantt/faq.html?utm_source=trial_html&utm_medium=referral&utm_campaign=gantt" target="_blank">
						FAQ
					</a>
					<p class="text-block m-b-10">
						Find answers to frequently asked technical questions
					</p>
					<p class="text-block m-b-10">
						If you decide to switch to a commercial version of DHTMLX with regular updates and timely customer support, learn more on our <a href="https://dhtmlx.com/docs/products/licenses.shtml?utm_source=trial_html&utm_medium=referral&utm_campaign=gantt" class="link" target="_blank">licensing and pricing page.</a>
					</p>
					<p class="text-block m-b-10">
						If you don’t find the necessary information following the links below, please contact our technical support team via email: <a href="mailto:evaluation.support@dhtmlx.com" class="link">evaluation.support@dhtmlx.com</a>
					</p>
					<p class="copyright"><span>© XB Software Ltd.</span><span>All rights reserved</span></p>
				</div>
			</div>
		</main>
	</body>
	</html>